<template>
  <div id="index">
    <div class="main">
      <div class="fl">
        <img src="../assets/pics/1.jpg" />
        <h3>几乎所有的行业<br />都稀缺独挡一面的前端人才</h3>
      </div>
      <div class="fr">
        <img src="../assets/pics/2.jpg" />
        <h3>&nbsp;从pc到移动端&nbsp;&nbsp;屏幕上的一切都由前端实现</h3>
      </div>
    </div>
    <div class="box2">
      <div class="box_In">
        <div class="box_hd">
          <h2>新形势下企业更注重前端工程师的综合能力</h2>
        </div>
        <div class="main">
          <div class="fl">
            <h3>初级前端程序员</h3>
            <div class="con">
              <img src="../assets/pics/3.jpg" />
            </div>
          </div>
          <img class="img3 wow zoomIn" src="../assets/pics/4.jpg" />
          <div class="fr">
            <h3>高级软件工程师</h3>
            <div class="con">
              <img src="../assets/pics/5.jpg" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav">
      <h2>《Web前端技术基础》学习平台设计与实现</h2>
      <div class="intro">
        <img src="../assets/pics/logo.jpg" alt="" />
        <div>
          <p>
            随着信息技术的发展,利用网络技术辅助人们实现远程自主学习,已成为可能并变得越来越普遍。
            学习交流平台实现了无论是居家、宿舍、出差,只要有网络就可以登录平台自主学习,不受地域、时间的限制,扩展了传统的学习模式,
            分析了系统开发的可行性、系统功能、开发环境、数据库设计等内容,可以让使用者学习到基础的Html4.0到5.0以及css3.0的知识点，并且对知识点进行测试巩固。
          </p>
        </div>
      </div>
    </div>
    <div class="login">
      <div class="login_item">
        <el-carousel
          style="width: 500px"
          height="300px"
          direction="vertical"
          :autoplay="true"
          :interval="2000"
        >
          <el-carousel-item class="item">
            <img src="../assets/pics/login1.jpg" alt="" />
          </el-carousel-item>
          <el-carousel-item class="item">
            <img src="../assets/pics/login2.webp" alt="" />
          </el-carousel-item>
          <el-carousel-item class="item">
            <img src="../assets/pics/login3.webp" alt="" />
          </el-carousel-item>
          <el-carousel-item class="item">
            <img src="../assets/pics/login4.jpg" alt="" />
          </el-carousel-item>
        </el-carousel>
        <div class="login_plat">
          <div class="login_title">登录</div>
          <form action="" class="login_input_content">
            <div class="login_input">
              <label>用户名：</label>
              <input
                v-model="username"
                type="text"
                placeholder="请输入用户名："
                name="username"
                id="username"
              />
            </div>
            <div class="login_input">
              <label>登录密码：</label>
              <input
                v-model="userpwd"
                type="password"
                placeholder="请输入登录密码："
                name="password"
                id="password"
              />
            </div>
            <div id="loginBtn" class="login_button">
              <el-button type="success" @click="login">登录</el-button>
              <el-button type="warning" native-type="reset">重置</el-button>
              <el-button>
                <router-link to="/zhuce">注册</router-link>
              </el-button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="option">
      <h1>体验评分：</h1>
      <el-rate v-model="value" :colors="colors" show-text> </el-rate>
      <p>欢迎您对我们的应用提供改进意见和建议,</p>
      <p>请发送邮件至278863303@qq.com。</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      value: null,
      login_info: [],
      username: "",
      userpwd: "",
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    };
  },
  created() {},
  methods: {
    login() {
      if (this.username === "" || this.userpwd === "") {
        this.$message({
          message: "不可以输入空的内容哦",
          type: "warning",
        });
        return;
      }
      axios({
        url: "/data/login.json",
        method: "get",
      }).then((res) => {
        this.login_info = res.data.login;
        let flag1 = this.login_info.some((v) => v.username === this.username);
        let flag2 = this.login_info.some((v) => v.userpwd === this.userpwd);
        if (flag1 && flag2) {
          this.$message({
            message: "登录成功!",
            type: "success",
          });
          localStorage.setItem("username", this.username);
          localStorage.setItem("userpwd", this.userpwd);
          this.username = "";
          this.userpwd = "";
        } else {
          this.$message({
            message: "账号密码有误！请重新输入",
            type: "warning",
          });
          this.userpwd = "";
        }
      });
    },
  },
};
</script>

<style>
</style>